<template>
  <el-table :data="tableData" style="width: 100%; margin-top: 30px">
    <el-table-column prop="amount" label="充值金额（元）" :formatter="moneyFormat" />
    <el-table-column prop="paymentMethod" label="充值方式" :formatter="operationTypeFormat" />
    <el-table-column prop="operationTime" label="充值时间" :formatter="timeFormat" />
  </el-table>
  <el-pagination
    background
    :current-page="queryChangeRecord.page"
    :page-size="queryChangeRecord.pageSize"
    :page-sizes="[5, 10, 20, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="queryChangeRecord.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
  import rechageService from '@/api/voucherCenter/rechageService'
  import { QueryParams } from '@/types/public'
  import { numberToCurrencyNo } from '@/utils'
  import { timeFormat } from '@/utils/formatter'
  import { paymentMethodArrs } from './data'

  interface QueryChangeRecord extends QueryParams {
    userId: string
    total?: number
    operationType: number
  }

  let tableData: Array<QueryChangeRecord> = reactive([])

  const queryChangeRecord = reactive<QueryChangeRecord>({
    page: 1,
    pageSize: 10,
    total: 0,
    userId: localStorage.getItem('userId') as string,
    operationType: 1
  })

  const moneyFormat = function (row: any, column: any, cellValue: any, index: any) {
    return '￥' + numberToCurrencyNo(cellValue)
  }

  const operationTypeFormat = function (row: any, column: any, cellValue: any, index: any) {
    let str = ''
    for (const key in paymentMethodArrs) {
      if (Object.prototype.hasOwnProperty.call(paymentMethodArrs, key)) {
        const element = paymentMethodArrs[key]
        for (const k in element.child) {
          if (Object.prototype.hasOwnProperty.call(element.child, k)) {
            const val = element.child[k]
            if (cellValue === val.id) {
              str = element.title + '-' + val.text
            }
          }
        }
      }
    }
    return str
  }

  const getList = () => {
    rechageService.balanceChangeRecord(queryChangeRecord).then((res) => {
      tableData.length = 0
      tableData.push(...res.data.data.changeRecord)
      queryChangeRecord.total = res.data.data.totalCount
    })
  }

  getList()
  const handleSizeChange = (val: number) => {
    queryChangeRecord.page = 1
    queryChangeRecord.pageSize = val
    getList()
  }
  const handleCurrentChange = (val: number) => {
    queryChangeRecord.page = val
    getList()
  }
</script>

<style lang="scss" scoped></style>
